﻿
<!doctype html>
<html>
<head>
<title>全国交通网</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="author" content="wangchunpeng">
<meta name="HandheldFriendly" content="True">
<meta name="viewport" content="width=device-width,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="cleartype" content="on">
<link rel="stylesheet" href="${ctx}/resource/css/style.css" media="screen"/>
<script type="text/javascript" src="${ctx}/resource/js/zepto.min.v1.js"></script>
<script type="text/javascript" src="${ctx}/resource/js/common-1.0.js"></script>
<script type="text/javascript" src="${ctx}/resource/js/budingweiche.v1.1.js"></script>
<script type="text/javascript">
    var TAP = ("WEB"=="WEB")?"mousedown":"tap";
    var EnablE = true;
    var dataForWeixin={
	appId : 'wx29e576d65e718bd8',
		timeLineTitle : '违章查询，尽在【全国交通网】公众帐号！',
		appMsgTitle : document.title,
		appMsgDesc : '违章查询，尽在【全国交通网】公众帐号！',
		imgUrl : "http://img.buding.cn/common/2014/04/24/9af57ff45e88c1a19e6d6add88e80e2d.jpeg",
		link : location.href
	};
	var callbacksForWeixin = {
		ready : function() {
		},
		cancel : function(resp) {
		},
		fail : function(resp) {
		},
		confirm : function(resp) {
		},
		all : function(resp) {
		},
		globalConfirm : function(resp) {
			$.post('json.asp?action=hi');
		}
	};
</script>
</head>
<body>
<div id="wrap"><style>

/* Swipe 2 required styles */

/*#header {
  overflow: hidden;
  visibility: hidden;
  position: relative;
}
.swipe-wrap {
  overflow: hidden;
  position: relative;
}
.swipe-wrap > div {
  float:left;
  width:100%;
  position: relative;
  line-height: 0;
}
#header img {
}
*//* END required styles */

.swipe-wrap div,
.swipe-wrap div a {line-height: 0;}

</style>
<div id="header">
  <div class="swipe-wrap">
    <div>
         <a target="_blank" href="#">
         <img src="${ctx}/resource/css/m.jpg" width="100%"></a>
      </div>
     
   </div>
</div>

<!--<script src='http://img.buding.cn/static/js/swipe.js'></script>-->
<script type="text/javascript">
	/*
    var followloop;
    window.onload=function(){
        followloop = setInterval(function(){
            Jax.follow();
        },1000);
    }
    */
   (function() {
      var hm = document.createElement("script");
      var ua = navigator.userAgent.toLowerCase();
      if(ua.match(/micromessenger/i)=="micromessenger") {
        setTimeout(function(){Jax.follow();},5000);
      }
    })();
/*
  var elem = document.getElementById('header');
  window.mySwipe = Swipe(elem, {
     // startSlide: 0,
     auto: 2000,
     speed: 500,
    // continuous: true,
    // disableScroll: true,
    // stopPropagation: true,
    // callback: function(index, element) {},
    // transitionEnd: function(index, element) {}

  });
*/
</script>
<div id="violations">
    <p class="vehicle-title">
        <#if carlist??><#list carlist as o>${(o.hphm)!''}</#list></#if><span>违章信息</span>
    </p>
    <ul id="vio"></ul>
    <p id="viewmore" class="button">
        <a>查看更多</a>
    </p>
    <p id="message">
        <img src="${ctx}/resource/css/load.gif"  /><br/>
    正在查询中...
    </p>
    <script type="text/javascript">
        $_PAGE= 0;
        function _date($time,type){
            var d = new Date();
            d.setTime($time*1000);

            if(type == 'year'){
                return d.Format("yyyy");
            }
            if(type == 'month'){
                return d.Format("MM/dd");
            }
            if(type == 'time'){
                return d.Format("hh:mm");
            }
        } 
        function getdata(){
           $.ajax({
                type :"POST",
                url:'${ctx}/wzcx/resultListJson',
                data:'action=ajax&page='+$_PAGE+'&args=${(args)!}',
                success:function(msg){
                    try{
                       // var mobj = $.parseJSON(msg);
                        var mobj = msg;
                        if(mobj.stat == 'ok'){
                            var violations =mobj.data; 
                            var shownum = 40;
                            var maxpage = Math.ceil(mobj.total_count/shownum)-1;
                            if(maxpage == $_PAGE){
                                $('#viewmore').hide();
                            }else{
                                $('#viewmore').show();  
                            }
                            var listhtml = '';
                            for(var i in violations){
                                listhtml+='<li class="'+violations[i].violation_status_class+'">';
                                listhtml+='<div class="timeline">';
                                listhtml+='<p class="year">'+_date(violations[i].violation_time,"year")+'</p>';
                                listhtml+='<p>'+_date(violations[i].violation_time,"month")+'</p>';
                                listhtml+='<p>'+_date(violations[i].violation_time,"time")+'</p>';
                                listhtml+='</div>';
                                listhtml+='<div class="little-circle"></div><div class="detail">';
                                listhtml+='<p><span>'+violations[i].violation_status_text+'</span> 扣分 <span>'+violations[i].violation_points+'</span> 罚款 <span>'+violations[i].violation_fine+'</span></p>';
                                listhtml+='<p class="reason">'+violations[i].violation_type+'</p>';
                                listhtml+='<p class="address">'+violations[i].violation_address+'</p>';
                                listhtml+='<hr /></div></li>';
                            }
                            $('#message').hide();
                            Jax.loaded();
                            $('#vio').append(listhtml);
                            $('#vio').fadeIn();
                        }else if(mobj.stat == 'TRY_AGAIN'){
                            setTimeout(function(){
                                getdata();
                            },1000);
                        }else{
                           $('#message').html(mobj.message);
                           Jax.loaded();
                        }
                    }catch(e){
                        $('#message').text('系统繁忙, 请稍后再试');
                        Jax.loaded();
                        alert('系统繁忙, 请稍后再试');
                    }
                }
            });
          }
        Zepto(function($){
			dataForWeixin.appMsgTitle = '点击查询我的违章信息';
			dataForWeixin.timeLineTitle = '【'+dataForWeixin.appMsgTitle +"】"+dataForWeixin.appMsgDesc;
			
			dataForWeixin.link = 'http://wx.wcar.net.cn/vehicle-action.php';
            getdata();
            $('#viewmore').click(function(){
                Jax.loading();
                $_PAGE++;
                getdata();
            });
        });
    </script>
</div>
    </div>
    <style type="text/css">
       #mask,#mask_black{position:fixed;top:0;width:100%;height:100%;left:0;background: #fff;opacity: 0.7;display: none}
       #mask_black{background: #000}
       img.loading{position: fixed;width: 80px;z-index:9999;display: none; left: 50%; top: 50%; margin-left:-40px; margin-top:-40px; /*transform: translate(-50%, -50%); -webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);*/}
       #follow-us{max-width:640px;min-width:320px;background: #fff;opacity: 0.94;padding-top:15px;padding-bottom:15px;width:100%;position: fixed;top:-140px;z-index: 99999;border-bottom:1px solid #ddd;box-shadow:0px 0px 4px #ddd;display: none;}
        #follow-us img{width:60px;border-radius: 5px;float:left;margin-top: 2px;margin-left:20px;}
        #follow-us p{font-size:14px;line-height: 1.5;padding-left: 95px;}
        #follow-us p b{color:#16d24c;}
        #follow-us p.pbtn{text-align:center;padding:0px;margin:0;font-size:12px;margin-top:10px;}
        #follow-us p.pbtn>button{font-size: 14px; padding-bottom: 9px;padding-top: 9px;border-radius: 2px 10px; width: 35%;}
        button { color: #004995; padding-top: 5px; padding-bottom: 5px; width: 50%; -webkit-appearance: none; border: 0; background: #55C126; color: #FFF; font-size: 18px; padding-top: 13px; padding-bottom: 13px; border-radius: 2px 15px 2px 15px;}
    </style>
     <div id="mask"></div>
   <img src="${ctx}/resource/css/load.gif"   class="loading"/>
     <script type="text/javascript" src="${ctx}/resource/js/wechat.min.v1.js"></script>
     <script type="text/javascript">
        WeixinApi.ready(function(Api){
            Api.shareToFriend(dataForWeixin, callbacksForWeixin);
            Api.shareToTimeline(dataForWeixin, callbacksForWeixin);
            Api.shareToWeibo(dataForWeixin, callbacksForWeixin);
        });
      
     </script>
    </body>
</html>
